<template>
  <div>
    <p>欢迎光临_vue开发的收银系统_水果店</p>
    <table>
      <th>
        苹果10¥/斤,折扣<8折>

        <tr>
          请输入你要购买的斤数<input type="text" v-model.number="num"/>
        </tr>
        <tr>
          <button @click="BUY">结账买单</button>
        </tr>
        <tr>
          结账单:总结:{{all}}¥元 折扣后:{{discount}}元 省了:{{save}}¥元
        </tr>
      </th>
    </table>
  </div>
</template>

<script>
export default {
  data(){
    return{
      price:10,
      num:0,
      all:0,
      discount:0,
      save:0
    }

  },
  methods: {
    BUY(){
      this.all=this.num*this.price
      this.discount=(this.num*this.price*0.8)
      this.save=this.all-this.discount
    }
  }
};
</script>

<style  scoped>
table,
th,
td {
  border: 1px solid black;
}
</style>>

